<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题解答</title>
    <style>
        @font-face {
            font-family: '方正书宋简体';
            src: url('../fonts/方正书宋简体.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-container">
        <div class="editor-panel">
            <h2>编辑内容</h2>
            <div class="edit-section">
                <label for="edit-title">标题：</label>
                <input type="text" id="edit-title" value="问题解答">
            </div>
            
            <div class="edit-section">
                <label for="edit-qa-1">问题1：</label>
                <textarea id="edit-qa-1">是纸质还是电子版？
PDF电子版，有电子阅读器格式</textarea>
            </div>
            
            <div class="edit-section">
                <label for="edit-qa-2">问题2：</label>
                <textarea id="edit-qa-2">如何发货？
网盘或者邮箱，更多发货方式联系客服
下单后订单下拉联系客服发货</textarea>
            </div>
            
            <div class="edit-section">
                <label for="edit-qa-3">问题3：</label>
                <textarea id="edit-qa-3">地址问题？系统需要必须填写地址
可填任意地址，无法配送联系客服</textarea>
            </div>
            
            <div class="edit-section">
                <label for="edit-qa-4">问题4：</label>
                <textarea id="edit-qa-4">电子版具有可复制性，无法收回
书籍链接发货后不支持退换
介意勿拍</textarea>
            </div>

            <div class="edit-section">
                <label for="watermark-text">水印文字：</label>
                <input type="text" id="watermark-text" value="营业通知">
            </div>
            
            <div class="color-settings">
                <h3>颜色设置</h3>
                <div class="color-option">
                    <label for="background-color">背景颜色：</label>
                    <input type="color" id="background-color" value="#f9f2e6">
                </div>
                <div class="color-option">
                    <label for="title-color">标题颜色：</label>
                    <input type="color" id="title-color" value="#8b5a2b">
                </div>
                <div class="color-option">
                    <label for="underline-color">下划线颜色：</label>
                    <input type="color" id="underline-color" value="#ffa500">
                </div>
                <div class="color-option">
                    <label for="qa-bg-color">问题背景色：</label>
                    <input type="color" id="qa-bg-color" value="#fff3e0">
                </div>
                <div class="color-option">
                    <label for="number-bg-color">数字背景色：</label>
                    <input type="color" id="number-bg-color" value="#8b5a2b">
                </div>
            </div>
            
            <div class="button-group">
                <button id="update-preview">更新预览</button>
                <button id="download-image">下载图片</button>
            </div>
        </div>

        <div class="preview-container">
            <div class="qa-card">
                <div class="corner-icon top-left"></div>
                <div class="corner-icon bottom-right"></div>
                <div class="watermark-text top-left">营业通知</div>
                <div class="watermark-text top-right">营业通知</div>
                <div class="watermark-text bottom-left">营业通知</div>
                <div class="watermark-text bottom-right">营业通知</div>
                
                <div class="title-section">
                    <h1 id="main-title">问题解答</h1>
                    <div class="title-underline"></div>
                </div>
                
                <div class="qa-items">
                    <div class="qa-item">
                        <div class="qa-number">1</div>
                        <div class="qa-content" id="qa-1">
                            <strong>是纸质还是电子版？</strong><br>
                            PDF电子版，有电子阅读器格式
                        </div>
                    </div>
                    
                    <div class="qa-item">
                        <div class="qa-number">2</div>
                        <div class="qa-content" id="qa-2">
                            <strong>如何发货？</strong><br>
                            网盘或者邮箱，更多发货方式联系客服<br>
                            下单后订单下拉联系客服发货
                        </div>
                    </div>
                    
                    <div class="qa-item">
                        <div class="qa-number">3</div>
                        <div class="qa-content" id="qa-3">
                            <strong>地址问题？系统需要必须填写地址</strong><br>
                            可填任意地址，无法配送联系客服
                        </div>
                    </div>
                    
                    <div class="qa-item">
                        <div class="qa-number">4</div>
                        <div class="qa-content" id="qa-4">
                            <strong>电子版具有可复制性，无法收回</strong><br>
                            书籍链接发货后不支持退换<br>
                            介意勿拍
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="script.js"></script>
</body>
</html>